<template>
  <div class="designer-container">
    <div>
      <el-button-group>
        <el-button size="mini" type="info" @click="save">保存</el-button>
        <el-button size="mini" type="info">BPMN</el-button>
        <el-button size="mini" type="info">SVG</el-button>
      </el-button-group>
    </div>

    <div class="flow-container">
      <div ref="content" class="containers">
        <div ref="canvas" class="canvas" />
        <div id="js-properties-panel" class="panel" />
        <ul class="buttons">
          <el-button-group>
            <a ref="saveDiagram" href="javascript:" title="BPMN" class="el-button el-button--info el-button--mini">BPMN</a>
            <a ref="saveSvg" href="javascript:" title="SVG" class="el-button el-button--info el-button--mini">SVG</a>
          </el-button-group>
        </ul>
      </div>
    </div></div>
</template>

<script>
// 引入相关的依赖
import BpmnViewer from 'bpmn-js'
import BpmnModeler from 'bpmn-js/lib/Modeler'
import propertiesPanelModule from 'bpmn-js-properties-panel'
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'
import activitiModdleDescriptor from 'camunda-bpmn-moddle/resources/activiti'
// 汉化
// import customTranslateModule from '../../../../public/customTranslate'

export default {
  name: 'Index',
  data() {
    return {
      // bpmn建模器
      bpmnModeler: null,
      container: null,
      canvas: null,
      xmlStr: null,
      processName: ''
    }
  },
  watch: {

  },
  mounted() {
    // 获取到属性ref为“content”的dom节点
    this.container = this.$refs.content
    // 获取到属性ref为“canvas”的dom节点
    const canvas = this.$refs.canvas

    // 建模，官方文档这里讲的很详细
    this.bpmnModeler = new BpmnModeler({
      container: canvas,
      // 添加控制板
      propertiesPanel: {
        parent: '#js-properties-panel'
      },
      additionalModules: [
        // 左边工具栏以及节点
        propertiesProviderModule,
        // 右边的工具栏
        propertiesPanelModule
        // 汉化
        // customTranslateModule
      ],
      moddleExtensions: {
        camunda: camundaModdleDescriptor

      }
    })

    // 下载画图
    const _this = this
    // 获取a标签dom节点
    const downloadLink = this.$refs.saveDiagram
    const downloadSvgLink = this.$refs.saveSvg
    // 给图绑定事件，当图有发生改变就会触发这个事件
    this.bpmnModeler.on('commandStack.changed', function() {
      _this.saveSVG(function(err, svg) {
        _this.setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg)
      })

      _this.saveDiagram(function(err, xml) {
        _this.setEncoded(downloadLink, 'diagram.bpmn', err ? null : xml)
      })
    })

    this.createNewDiagram(this.bpmnModeler)
  },
  methods: {
    save() {
      this.saveDiagram(this.xmlStr)
    },
    createNewDiagram() {
      const bpmnXmlStr = '<?xml version="1.0" encoding="UTF-8"?>\n' +
          '<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:activiti="http://activiti.org/bpmn" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" typeLanguage="http://www.w3.org/2001/XMLSchema" expressionLanguage="http://www.w3.org/1999/XPath" targetNamespace="http://www.activiti.org/processdef">\n' +
          '  <process id="example" name="example" isExecutable="true">\n' +
          '    <startEvent id="startEvent1"></startEvent>\n' +
          '  </process>\n' +
          '  <bpmndi:BPMNDiagram id="BPMNDiagram_example">\n' +
          '    <bpmndi:BPMNPlane bpmnElement="example" id="BPMNPlane_example">\n' +
          '      <bpmndi:BPMNShape bpmnElement="startEvent1" id="BPMNShape_startEvent1">\n' +
          '        <omgdc:Bounds height="30.0" width="30.0" x="100.0" y="163.0"></omgdc:Bounds>\n' +
          '      </bpmndi:BPMNShape>\n' +
          '    </bpmndi:BPMNPlane>\n' +
          '  </bpmndi:BPMNDiagram>\n' +
          '</definitions>' // 将字符串转换成图显示出来
      this.bpmnModeler.importXML(bpmnXmlStr, function(err) {
        if (err) {
          console.error(err)
        } else {
          // 这里还没用到这个，先注释掉吧
          // that.success()
        }
      })
    },
    // 下载为SVG格式,done是个函数，调用的时候传入的
    saveSVG(done) {
      // 把传入的done再传给bpmn原型的saveSVG函数调用
      this.bpmnModeler.saveSVG(done)
    },
    // 下载为SVG格式,done是个函数，调用的时候传入的
    saveDiagram(done) {
      console.log(this.xmlStr)
      // 把传入的done再传给bpmn原型的saveXML函数调用
      this.bpmnModeler.saveXML({ format: true }, function(err, xml) {
        done(err, xml)
      })
    },
    // 当图发生改变的时候会调用这个函数，这个data就是图的xml
    setEncoded(link, name, data) {
      // 把xml转换为URI，下载要用到的
      const encodedData = encodeURIComponent(data)
      // 获取到图的xml，保存就是把这个xml提交给后台
      this.xmlStr = data
      // 下载图的具体操作,改变a的属性，className令a标签可点击，href令能下载，download是下载的文件的名字
      if (data) {
        link.className = 'active'
        link.href = 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData
        link.download = name
      }
    }

  }
}
</script>

<style>

/*左边工具栏以及编辑节点的样式*/
@import '~bpmn-js/dist/assets/diagram-js.css' ;
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';

/*右边工具栏样式*/
@import '~bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';

  .flow-container {
  display: flex;
}
.containers{
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.canvas{
  width: 100%;
  height: 100%;
}
.panel{
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
  height:100%;
  overflow-y:scroll;
}
.buttons{
  position: absolute;
  left: 20px;
  bottom: 20px;
&>li{
    display:inline-block;margin: 5px;
  &>a{
      color: #999;
      background: #eee;
      cursor: not-allowed;
      padding: 8px;
      border: 1px solid #ccc;
    &.active{
        color: #333;
        background: #fff;
        cursor: pointer;
      }
    }
  }
}
  .designer {
  &-container {
  margin: 20px;
}

  &-text {
  font-size: 20px;
  line-height: 30px;
}
}
</style>
